<template>
<!-- 首页模块 -->
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="mgb20" style="height:245px;">
          <div style="display:flex">
            <div style="width:30%">
              <div class="user-info" style="height: 145px;">
                <!--头像显示-->
                <img :src="user.image" class="user-avator" alt/>
                <div class="user-info-cont">
                  <div v-if="topicTitle" class="user-info-name">{{ user.realName }}</div>
                  <div v-else class="user-info-name">{{ user.realName }}</div>
                  <br/>
                  <div>
                    职位信息：<el-tag v-for="item in user.roles" style="margin-right: 5px" type="info" size="small">{{ item.nameZh }}</el-tag>
                  </div>


                  <!--签到模块-->
                  <div v-if="!dayLogin" style="margin-top: 5px">
<!--                    <el-tag size="mini" type="info" style="margin-right: 5px" @click="dayLoginSubmit()">签到</el-tag>-->
                    <el-tag style="margin-right: 5px" @click="dayLoginSubmit()">签到</el-tag>
                  </div>
                  <div v-if="dayLogin && !dayLogout" style="margin-top: 5px">
                    <span style="margin-right: 5px">签到时间：{{ dayLoginVo.createTime }}</span><br/>
                    <el-tag style="margin-right: 5px" @click="dayLogoutSubmit()">签退</el-tag>
                  </div>
                  <div v-if="dayLogout" style="margin-top: 5px">
                    <span style="margin-right: 5px">签到时间：{{ dayLoginVo.createTime }}</span><br/><br/>
                    <span style="margin-right: 5px">签退时间：{{ dayLogoutVo.createTime }}</span>
                  </div>
                </div>
              </div>
              <div class="user-info-list" style="margin-left: 5px">
                用&nbsp;&nbsp;户&nbsp;&nbsp;名&nbsp;&nbsp;称：
                <span>{{ user.username }}</span>
              </div>
              <div class="user-info-list">
                上次登录时间：
                <span>{{ user.lastLoginTime }}</span>
              </div>
            </div>
            <div style="width:70%" class="right">
              <div>
                <!--                <i class="el-icon-setting" style="float:right"></i>    -->
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          今日待完成事项：<p style="size: 10px; font-family: 楷体; text-align: center">{{ user.remark }}</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="" type="flex" class="row-bg" justify="center">
      <el-col>
        <el-card class=".shadowC" style="width: 500px; height: 450px; margin-left: 20px; background-color: #FAFAFA;"
                 shadow="hover"
        >
          <el-calendar v-model="currentDate">
          </el-calendar>
        </el-card>
      </el-col>
      <el-col>
        <div id="elTime" class="elTime">
          <el-timeline :reverse="reverse" >
            <el-timeline-item v-for="item in noticeList" style="margin-left: 30px; margin-top: 10px"
                              :timestamp="item.notice.createTime" placement="top"
                              :lable="true"
            >
              <el-card style="margin-right: 40px; width: 600px; margin-top: 10px">
                <div style="display: inline">
                  <el-avatar size="medium" :src="item.createByUser.image"></el-avatar>
                  <h5 style="display: inline; margin-left: 15px; margin-bottom: 15px; font-size: 20px">
                    发布人：{{ item.createByUser.nickname }}<br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    标&nbsp;&nbsp;&nbsp;题：{{ item.notice.title }} </h5>
                </div>
                <p> &nbsp;&nbsp;&nbsp;{{ item.notice.content }}</p>
              </el-card>
            </el-timeline-item>

          </el-timeline>

          <el-backtop target=".elTime">
            <div
              style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
            >
              UP
            </div>
          </el-backtop>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      user: {},
      currentDate: new Date(),
      noticeList: [],
      topicTitle: '',
      dayLogin: false,
      dayLoginVo: {},
      dayLogout: false,
      dayLogoutVo: {},
      reverse: true
    }
  },
  components: {},
  computed: {},
  //页面挂载的时候执行这里面的代码，
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.axios.get('/user/info').then(resp => {
        this.user = resp.data
        this.axios.post('/notice/getNoticeByRole', resp.data.roles).then(resp => {
          this.noticeList = resp.data
        })
        //获取个人签到信息
        this.axios.post('/clock/select', {
          userId: resp.data.id,
          createTime: this.getDay(),
          // updateTime: this.getDay()
        }).then(resp => {
          resp.data.forEach(clock => {
            if ('签到' == clock.clockType) {
              this.dayLogin = true
              this.dayLoginVo = clock
            }
            if ('签退' == clock.clockType) {
              this.dayLogout = true
              this.dayLogoutVo = clock
            }
          })
        })
      })
      console.log(this.getNowFormatDate())
    },
    getDay() {
      const date = new Date()
      const mon = date.getMonth() + 1
      const day = date.getDate()
      return date.getFullYear() + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day)
    },
    dayLoginSubmit() {
      console.log(this.user)
      let clock = {
        userId: this.user.id,
        departmentId: this.user.departmentId,
        clockType: '签到'
      }
      this.axios.post('/clock/add', clock).then(resp => {
        if (resp.msg == "200" ) {
          this.dayLogin = true
          this.dayLoginVo.createTime = this.getNowFormatDate()
          this.$message({
            message: resp.data,
            type: 'success'
          })

        }else if (resp.msg == "400"){
          this.dayLogin = true
          this.dayLoginVo.createTime = this.getNowFormatDate()
          this.$message({
            message: resp.data,
            type: 'warning'
          })
        }
      })
    },
    dayLogoutSubmit() {
      let clock = {
        userId: this.user.id,
        departmentId: this.user.departmentId,
        clockType: '签退'
      }
      this.axios.post('/clock/add', clock).then(resp => {
        if (resp.msg == "200") {
          this.dayLogout = true
          this.dayLogoutVo.createTime = this.getNowFormatDate()
          this.$message({
            message: resp.data,
            type: 'success'
          })
        }else if (resp.msg == "400"){
          this.dayLogout = true
          this.dayLogoutVo.createTime = this.getNowFormatDate()
          this.$message({
            message: resp.data,
            type: 'warning'
          })
        }
      })
    },
    getNowFormatDate() {
      let date = new Date()
      const seperator1 = '-'
      const seperator2 = ':'
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      return date.getFullYear() + seperator1 + month + seperator1 + strDate
        + ' ' + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds())
    },
  }

}
</script>
<style>
/*.grid-content /deep/ .el-calendar-table .el-calendar-day*/
.el-calendar-table .el-calendar-day {
  height: 50px;

}
</style>
<style lang="scss" scoped>
.elTime {
  //height: 100vh;
  overflow-y: scroll;
  height: 450px;
  width: 800px;
  margin-right: 20px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  //background: #FAFAFA;
  border-radius: 5px;
  //background-color: #5cb85c;
  overflow-x: hidden;
  overflow-y: auto;
}

.elTime::-webkit-scrollbar {
  display: none
}

.shadowC {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #FAFAFA;
}

.el-calendar-table .el-calendar-day {
  height: 10px;
  background-color: #FAFAFA;
}

.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.right {
  background-image: url(../../assets/thesis.jpeg);
  border-radius: 5px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 0px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
</style>
